<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/jquery-weui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../../css/order.css" />
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_546019_o8qxm6fupb0ggb9.css" />
    <title>待提交订单</title>
    <script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/baseConfig.js" type="text/javascript" charset="utf-8"></script>
    <script src=" http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<style type="text/css">
	.demos-content-padded{
		width: 100%;
		height: 2.5rem;
		position: fixed;
		bottom: 0;
		left: 0;
		line-height: 2.5rem;
		color: #fff;
		margin-bottom: 0;
		padding: 0;
	}
	.demos-content-padded .weui-btn_primary{
		width: 100%;
	}
</style>
<body>
    <!--<div id="header">
			<div class="header-title" style="position: fixed;top: 0;">
				<img src="../../img/left.png" class="left" />
				<span>待提交订单</span>
			</div>
		</div>-->
    <div class="addNeworder" style="margin-top: 0;margin-bottom: 2.5rem;">
        
        <div class="identity-type">
            <span>物料列表</span>
            <!--<i>添加物料</i>-->
        </div>
        <div class="material-list">
            <ul class="material_list">
                
            </ul>
            <span style="padding-top: 0.5rem;display: inline-block;">补传物料图片</span>
            <div class="weui-cells weui-cells_form" style="margin: 0.5rem 0 1.05rem 0">
                <!--<form method="post" >-->
                <div class="weui-cell" style="padding: 0;">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files">

                            </ul>
                            <div class="weui-uploader__input-box">
                                <form method="post" id="form1">
                                    <input id="uploaderInput" index="" name="file" class="weui-uploader__input js_file" type="file" accept="image/*">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <span style="width: 100%;font-size: 0.64rem;text-align: center;display: inline-block;padding-top: 1rem;">如需修改订单，请联系客服</span>
                <!--</form>-->
            </div>
            <!-- <div class="demos-content-padded">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary delete" style="float: left;margin-top: 0;background:#f65555;">删除</a>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary confirm" style="float: right;margin-top: 0;background: #28c81e;">确定</a>
            </div> -->
        </div>
        <div class="addNeworder-top">
            <!--<h3>
                <span>订单编号<img src="../../img/start.png"></span>
                <input type="text" name="" id="" value="" class="orderNumber" disabled="disabled" />
            </h3>-->
            <p>
                <span>运输方式</span>
                <span><i class="iconfont icon-duigouzhong factory active"></i><span  class="transType"></span></span>
                <!--<span><i class="iconfont icon-duigouzhong since"></i>自提</span>-->
            </p>
            <p>
                <span>是否含税</span>
                <span><i class="iconfont icon-duigouzhong hanshui active"></i><span  class="hasTax"></span></span>
                <!--<span><i class="iconfont icon-duigouzhong buhanshui"></i>未税</span>-->
            </p>
            <p style="border-bottom: 0;">备注：</p>
            <textarea name="" rows="" cols="" class="remarks"></textarea>
        </div>
    </div>
     <div class="demos-content-padded">
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">确定</a>
    </div>
    <div class="weui-gallery" style="display: none">
        <span class="weui-gallery__img"></span>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        baseConfig.historyBack();
        $.showLoading("加载中...");
        var id = baseConfig.GetQueryString("orderid");
        $.ajax({
                type: "get",
                url: baseConfig.localHttp2 + "/api/order/getFgOrderDetail",
                async: true,
                data: {
                    orderId: id
                },
                success: function(data) {
                    $.hideLoading();
                    console.log(data)
                    var materialList = data.content.orderMaterialList
                    if (data.code == 100) {
                        var orderNo = data.content.orderNo;
                        var tranType = data.content.tranType;
                        var isHanshui = data.content.isHanshui
                        var remarks = data.content.remarks
                        $(".orderNumber").val(orderNo)
                        $("textarea").html(remarks)
                        if (isHanshui == 10) {
                            $(".hasTax").html("含税")
                        } else {
                           $(".hasTax").html("未税")
                        }
                        if (tranType == 0) {
                            $(".transType").html("到厂")
                        } else {
                            $(".transType").html("自提")
                        }
                        var $li = "";
                        for (var i = 0; i < materialList.length; i++) {
                            $li += "<li data-orderNo=" + materialList[i].orderNo + "><p><span>" + materialList[i].materialName + "</span></p>"
                            $li += "<p><span>物料重量</span><b>" + materialList[i].weight + "<em>吨</em></b></p>"
                            $li += "<p><span>物料单价</span><b>" + materialList[i].unitPrice + "<em>元/吨</em></b></p>"
                            $li += "<p><span>含杂比例</span><b>" + materialList[i].zazhiPercent + "<em>%</em></b></p></li>"
                        }
                        $(".material_list").append($li)
                            // $(".material_list li").on("click", function() {
                            //     var orderNo = $(this).attr("data-orderNo")
                            //     location.href = "materialList.html?orderNo=" + orderNo + "&orderid=" + id
                            // })
                        getImg(orderNo)
                            //图片上传					
                    }
                },
                error: function() {
                    $.hideLoading();
                }
            })
            //获取订单所有图片
        function getImg(orderNo) {
            $.ajax({
                type: "get",
                url: baseConfig.localHttp2 + "/api/order/getOrderImg",
                async: true,
                data: {
                    orderNo: orderNo
                },
                success: function(data) {
                    if (data.code == 100) {
                        console.log(data)
                        var li = ""
                        for (var j = 0; j < data.content.length; j++) {
                            li += "<li class='weui-uploader__file' data-src=" + data.content[j] + " style='background-image:url(" + baseConfig.imglocalHttp + data.content[j] + ")'><img src='../../img/delete.png' data-index=" + j + "  class=delete></li>"
                        }
                        $(".weui-uploader__files").append(li)
                            //图片预览
                        $(".weui-uploader__files li").on("click", function() {
                                // var src = $(this).css("background-image")
                                // $(".weui-gallery").show()
                                // $(".weui-gallery__img").css("background-image", src)
                                // $(".weui-gallery").on("click", function() {
                                //     $(this).hide()
                                // })

                                var nowurl = baseConfig.imglocalHttp + $(this).attr("data-src")
                                var imgsurl = [nowurl]
                                wx.previewImage({
                                    current: nowurl,
                                    urls: imgsurl
                                });
                                console.log(nowurl, imgsurl)
                            })
                            // var imgsurl = [];
                            // var nowurl = '';
                            // var imgObj = $(".weui-uploader__files li");
                            // for (var i = 0; i < imgObj.length; i++) {
                            //     imgsurl[i] = imgObj[i].attr("data-src");
                            //     imgObj[i].onclick = function() {
                            //         nowurl = this.css("background-image");
                            //         wx.previewImage({
                            //             current: nowurl,
                            //             urls: imgsurl
                            //         });
                            //     }
                            //     console.log(nowurl, imgsurl)
                            // }
                            //图片删除
                        uploadImg(orderNo)
                            //							for(var i=0;i<$(".weui-uploader__file .delete").length;i++){
                        $(".weui-uploader__file .delete").on("click", function(event) {
                                event.stopPropagation()
                                var index = $(this).attr("data-index")
                                var src = $(this).parent().attr("data-src")
                                $.confirm("确定删除这张图片么？", function() {
                                    $.ajax({
                                        type: "get",
                                        url: baseConfig.localHttp2 + "/api/order/deleteOrderImg",
                                        async: true,
                                        data: {
                                            imagePath: src
                                        },
                                        success: function(data) {
                                            if (data.code == 100) {
                                                console.log(data)
                                                location.reload();
                                            } else {

                                            }
                                        }
                                    })
                                }, function() {
                                    sessionStorage.removeItem("Index")
                                        //取消之后的回调
                                })
                            })
                            //							}

                    } else {

                    }
                }
            })
        }
        //上传图片
        //图片多张上传预览
        function uploadImg(orderNo) {
            //			var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
            //		// 1024KB，也就是 1MB
            //		var maxSize = 1024 * 1024;
            // 图片最大宽度
            var maxWidth = 1000;
            // 最大上传图片数量
            var maxCount = 6;
            var index = 1;
            var Index = $(".weui-uploader__files li").length;
            $('.weui-uploader__input-box').on('change', '.js_file', function(event) {
                var files = event.target.files;
                // 如果没有选中文件，直接返回		
                var $input = $("<form method='post' id='form" + index + "'><input id='uploaderInput' index=" + index + " name='file' class='weui-uploader__input js_file' type='file' accept='image/*'></form>")
                $(".weui-uploader__input-box").append($input);
                if (files.length === 0) {
                    return;
                }
                for (var i = 0, len = files.length; i < len; i++) {
                    var file = files[i];
                    var reader = new FileReader();
                    // 如果类型不在允许的类型范围内
                    //				if(allowTypes.indexOf(file.type) === -1) {
                    //					$.weui.alert({
                    //						text: '该类型不允许上传'
                    //					});
                    //					continue;
                    //				}
                    //				if(file.size > maxSize) {
                    //					$.weui.alert({
                    //						text: '图片太大，不允许上传'
                    //					});
                    //					continue;
                    //				}
                    //				if($('.weui_uploader_file').length >= maxCount) {
                    //					$.weui.alert({
                    //						text: '最多只能上传' + maxCount + '张图片'
                    //					});
                    //					return;
                    //				}
                    reader.onload = function(e) {
                        var img = new Image();
                        img.onload = function() {
                            // 不要超出最大宽度
                            var w = Math.min(maxWidth, img.width);
                            // 高度按比例计算
                            var h = img.height * (w / img.width);
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            // 设置 canvas 的宽度和高度
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(img, 0, 0, w, h);
                            var base64 = canvas.toDataURL('image/png');
                            // 插入到预览区
                            var $preview = $('<li class="weui-uploader__file weui-uploader__file_status"  style="background-image:url(' +
                                base64 + ')"><img src="../../img/delete.png" class="delete" index=' + index + '  /><div class="weui-uploader__file-content">0%</div></li>');
                            $('.weui-uploader__files').append($preview);

                            // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传
                            var formData = new FormData($("#form1")[0])
                            formData.append("orderNo", orderNo);
                            formData.append("number", Index + 1)
                            $.ajax({
                                type: "post",
                                url: baseConfig.localHttp2 + "api/order/uploadOrderImg",
                                async: false,
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function(data) {
                                    console.log(data)
                                    setTimeout(function() {
                                        location.reload();
                                    }, 1500)

                                },
                                error: function() {

                                }
                            })

                            //上传进度
                            var progress = 0;

                            function uploading() {
                                $preview.find('.weui-uploader__file-content').text(++progress + '%');
                                if (progress < 100) {
                                    setTimeout(uploading, 10);
                                } else {
                                    //如果是失败，塞一个失败图标
                                    $preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
                                    $preview.removeClass('weui-uploader__file_status')
                                        .find('.weui-uploader__file-content')
                                        .remove();
                                }
                            }
                            setTimeout(uploading, 10);
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }

            });
        }
        //点击确定按钮
        $(".weui-btn_primary").on("click",function(){
        	$.confirm("是否确认提交订单，提交后无法修改，如需修改，请联系客服处理", function() {
					 $.ajax({
                       type: "get",
                       url: baseConfig.localHttp + "/api/order/addOrEditOrder",
                       async: true,
                       data: {
                           id: id,
                           remarks:$(".remarks").val()
                       },
                       success: function(data) {
                       	console.log(data)
                           if (data.code == 100) {                       
                              location.href = "../../index.html"
                           } else {

                           }
                       }
                   })			
				}, function() {
					//点击取消后的回调函数
				});
        	
        })
        // $(".delete").on("click", function() {
        //     $.confirm("确定删除该订单？", function() {
        //         $.ajax({
        //             type: "get",
        //             url: baseConfig.localHttp2 + "/api/order/deleteOrder",
        //             async: true,
        //             data: {
        //                 id: id
        //             },
        //             success: function(data) {
        //                 if (data.code == 100) {
        //                     window.location.replace(document.referrer)
        //                 } else {

        //                 }
        //             }
        //         })
        //     }, function() {

        //     })
        // })
        // $(".confirm").on("click", function() {
        //     location.href = "orderList.html"
        //         //				location.href = "http://www.hsw.com/a/weixinMyCenter"
        // })
    })
</script>

</html>